/**
 * inline: true
 */
import { Icon, type IconEnum } from '@fomantic-react/main';

import './icons.css';

export default () => {
  const icons: { [key: string]: string[] } = {
    accessibility: [
      'wheelchair',
      'universal-access',
      'tty',
      'sign-language',
      'question-circle',
      'phone-volume',
      'low-vision',
      'deaf',
      'closed-captioning',
      'braille',
      'blind',
      'audio-description',
      'assistive-listening-systems',
      'american-sign-language-interpreting',
      'accessible',
      'question-circle-outline',
      'closed-captioning-outline',
    ],
    alert: [
      'skull-crossbones',
      'radiation-alt',
      'radiation',
      'exclamation-triangle',
      'exclamation-circle',
      'exclamation',
      'bell-slash',
      'bell',
      'bell-slash-outline',
      'bell-outline',
    ],
    animals: [
      'spider',
      'paw',
      'otter',
      'kiwi-bird',
      'horse-head',
      'horse',
      'hippo',
      'frog',
      'fish',
      'feather-alt',
      'feather',
      'dragon',
      'dove',
      'dog',
      'crow',
      'cat',
    ],
    arrows: [
      'upload',
      'undo-alt',
      'undo',
      'text-width',
      'text-height',
      'sync-alt',
      'sync',
      'sort-up',
      'sort-numeric-up-alt',
      'sort-numeric-up',
      'sort-numeric-down-alt',
      'sort-numeric-down',
      'sort-down',
      'sort-amount-up-alt',
      'sort-amount-up',
      'sort-amount-down-alt',
      'sort-amount-down',
      'sort-alpha-up-alt',
      'sort-alpha-up',
      'sort-alpha-down-alt',
      'sort-alpha-down',
      'sort',
      'sign-out-alt',
      'sign-in-alt',
      'share-square',
      'share',
      'retweet',
      'reply-all',
      'reply',
      'redo-alt',
      'redo',
      'recycle',
      'random',
      'play',
      'mouse-pointer',
      'long-arrow-alt-up',
      'long-arrow-alt-right',
      'long-arrow-alt-left',
      'long-arrow-alt-down',
      'location-arrow',
      'level-up-alt',
      'level-down-alt',
      'history',
      'hand-pointer',
      'hand-point-up',
      'hand-point-right',
      'hand-point-left',
      'hand-point-down',
      'external-link-square-alt',
      'external-link-alt',
      'expand-arrows-alt',
      'expand-alt',
      'exchange-alt',
      'download',
      'compress-arrows-alt',
      'compress-alt',
      'cloud-upload-alt',
      'cloud-download-alt',
      'chevron-up',
      'chevron-right',
      'chevron-left',
      'chevron-down',
      'chevron-circle-up',
      'chevron-circle-right',
      'chevron-circle-left',
      'chevron-circle-down',
      'chartline',
      'cart-arrow-down',
      'caret-up',
      'caret-square-up',
      'caret-square-right',
      'caret-square-left',
      'caret-square-down',
      'caret-right',
      'caret-left',
      'caret-down',
      'arrows-alt-v',
      'arrows-alt-h',
      'arrows-alt',
      'arrow-up',
      'arrow-right',
      'arrow-left',
      'arrow-down',
      'arrow-circle-up',
      'arrow-circle-right',
      'arrow-circle-left',
      'arrow-circle-down',
      'arrow-alt-circle-up',
      'arrow-alt-circle-right',
      'arrow-alt-circle-left',
      'arrow-alt-circle-down',
      'angle-up',
      'angle-right',
      'angle-left',
      'angle-down',
      'angle-double-up',
      'angle-double-right',
      'angle-double-left',
      'angle-double-down',
      'share-square-outline',
      'hand-pointer-outline',
      'hand-point-up-outline',
      'hand-point-right-outline',
      'hand-point-left-outline',
      'hand-point-down-outline',
      'caret-square-up-outline',
      'caret-square-right-outline',
      'caret-square-left-outline',
      'caret-square-down-outline',
      'arrow-alt-circle-up-outline',
      'arrow-alt-circle-right-outline',
      'arrow-alt-circle-left-outline',
      'arrow-alt-circle-down-outline',
    ],
    'audio & Video': [
      'volume-up',
      'volume-off',
      'volume-mute',
      'volume-down',
      'video',
      'undo-alt',
      'undo',
      'tv',
      'sync-alt',
      'sync',
      'stop-circle',
      'stop',
      'step-forward',
      'step-backward',
      'rss-square',
      'rss',
      'redo-alt',
      'redo',
      'random',
      'podcast',
      'play-circle',
      'play',
      'photo-video',
      'phone-volume',
      'pause-circle',
      'pause',
      'music',
      'microphone-slash',
      'microphone-alt-slash',
      'microphone-alt',
      'microphone',
      'headphones',
      'forward',
      'film',
      'file-video',
      'file-audio',
      'fast-forward',
      'fast-backward',
      'expand-arrows-alt',
      'expand-alt',
      'expand',
      'eject',
      'compress-arrows-alt',
      'compress-alt',
      'compress',
      'closed-captioning',
      'circle',
      'broadcast-tower',
      'backward',
      'audio-description',
      'youtube',
      'stop-circle-outline',
      'play-circle-outline',
      'pause-circle-outline',
      'file-video-outline',
      'file-audio-outline',
      'closed-captioning-outline',
      'circle-outline',
    ],
    automotive: [
      'truck-pickup',
      'truck-monster',
      'truck',
      'trailer',
      'taxi',
      'tachometer-alt',
      'shuttle-van',
      'oil-can',
      'motorcycle',
      'gas-pump',
      'charging-station',
      'caravan',
      'car-side',
      'car-crash',
      'car-battery',
      'car-alt',
      'car',
      'bus-alt',
      'bus',
      'ambulance',
      'air-freshener',
    ],
    autumn: [
      'wine-bottle',
      'wind',
      'tree',
      'tractor',
      'mountain',
      'hiking',
      'football-ball',
      'drumstick-bite',
      'cloud-sun',
      'campground',
      'fruit-apple',
    ],
  };

  let res = [];

  for (const key in icons) {
    if (Object.prototype.hasOwnProperty.call(icons, key)) {
      let arr = icons[key].sort();
      res.push(
        <h2 key={key} id={key}>
          <a href={`#${key}`} tabIndex={-1} aria-hidden="true">
            <span className="icon icon-link"></span>
          </a>
          {key.replace(/( |^)[a-z]/g, (L) => L.toUpperCase())}
          &emsp;
          <span className="dumi-default-badge">{arr.length}</span>
        </h2>,
      );
      let sub: JSX.Element[] = [];
      arr.forEach((name) => {
        let newName = name
          .replace(/-alt$/, '-alternate')
          .replace(/-alt-/, '-alternate-')
          .replace(/-alpha-/, '-alphabet-')
          .replace(/-h$/, '-horizontal')
          .replace(/-v$/, '-vertical')
          .replace(/-/g, ' ');
        if (newName === 'fruit apple') {
          newName = 'fruit-apple';
        }
        sub.push(
          <div key={name} className="wrap" title={newName}>
            <Icon name={newName as IconEnum} />
          </div>,
        );
      });
      res.push(
        <div key={`${key}-icons`} className="icons">
          {sub}
        </div>,
      );
    }
  }

  return <div className="markdown">{res}</div>;
};
